"use client"
import { useState } from "react"
import { useAuth, useUser } from "@clerk/nextjs";

export default function Counter() {
    const [count, setCount] = useState(0);

    // 方法一：使用useUser()
    const { user, isSignedIn, isLoaded } = useUser();
    if(!isLoaded || !isSignedIn){
        return null; 
    }

    // 方法二：使用useAuth()
    // const { isLoaded, userId, sessionId, getToken } = useAuth();
    // if(!isLoaded || !userId){
    //     return null; 
    // }

    return (
        <div>
            <h2>Counter</h2>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    )
}
